<template>
  <view>
    <view class="styleJobDescriptionContainer">
      <view class="styleJobDescriptionTitleContainer">
        <view class="styleJobDescriptionTitleLine"></view>
        <view class="styleJobDescriptionTitle"> {{ title }}</view>
      </view>
      <view v-if="professionList.length > 0" class="profession-list">
        <view
          class="profession-item"
          v-for="(item, index) in professionList.slice(0, 8)"
          :key="index"
          @click="jumpToMajorDeatil(item)"
          >{{ item.tagName }}
        </view>
      </view>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </view>
</template>
<script>
import {
  getLayerDetailsData,
  getJobDescriptionData,
} from "@/api/modules/career";
import Empty from "@/components/Empty.vue";
import LoginDialog from "@/components/LoginDialog";

export default {
  components: {
    Empty,
    LoginDialog,
  },
  props: {
    title: {
      type: String,
      default: "标题",
    },
    positionId: {
      type: String,
      default: "",
    },
    layerId: {
      type: String,
      default: null,
    },
    positionName: {
      type: String,
      default: "",
    },
    pageName: {
      type: String,
      default: "",
    },
    isAuthSetting: {
      type: Boolean,
      default: false,
    },
    personId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      listJobDescriptions: [],
      professionList: [],
    };
  },
  mounted() {
    // this.checkAuthSetting();
    this.getLayerDetail();
    this.getJobDescriptionDataFn();
    console.log("personId", this.personId, "isAuthSetting", this.isAuthSetting);
  },
  methods: {
    jumpToMajorDeatil(item) {
      console.log("item", item);
      uni.navigateTo({
        url:
          `/pagesSub/careerNew/majorDetail/index?positionTagId=` +
          item.positionTagId,
      });
    },
    async getJobDescriptionDataFn() {
      const params = {
        id: this.positionId,
        layerIds: this.layerId,
      };
      const res = await getJobDescriptionData(params);
      if (res.code == 200) {
        // console.log("res", res);
        this.professionList = res.data[0].data;
        // console.log("this.professionList", this.professionList);
      } else {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
      }
    },
    checkAuthSetting() {
      uni.getSetting({
        success: (res) => {
          if (res && res.authSetting && res.authSetting["scope.userInfo"])
            this.isAuthSetting = true;
        },
      });
    },
    showLoginDialog() {
      if (this.personId) {
        this.$emit("refreshData");
      } else {
        this.$refs.loginDialog.setVisibility(true);
      }
    },
    iconPng(item) {
      // let matchedIcon = IconList.find((icon) => icon.name === item.title);
      // if (matchedIcon) {
      //   return `../../../../static/positionIcon/${matchedIcon.path}.png`;
      // } else
      if (item.icon) {
        return item.icon;
      } else {
        return "https://upload.yl1001.com/upload/files/view?file=rV_omNEGqOmTLZlj8s6j9in1FZNH8ioN-ywOXbrGAQnOCxBB_mZK_OhQXlXsX.png";
      }
    },
    loginSuccessBack() {
      uni.showToast({
        title: "登录成功",
        icon: "none",
      });
      this.$emit("refreshData");
    },
    getLayerDetail() {
      if (!this.layerId) return;
      this.loading = true;
      const params = {
        id: this.positionId,
        layerIds: this.layerId,
      };
      getLayerDetailsData(params)
        .then((res) => {
          if (res.code == 200) {
            this.listJobDescriptions = res.data[0].children;
            // console.log(
            //   "res111" + this.title,
            //   this.listJobDescriptions,
            //   this.listJobDescriptions.length
            // );
          } else {
            console.log("请求失败");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    clickJobDescriptionItem(index, item) {
      console.log("clickJobDescriptionItem", index, item);
      uni.navigateTo({
        url:
          "/pagesSub/careerNew/positionDictionary/JobDescriptionDetail?layerId=" +
          item.layerId +
          "&title=" +
          item.title +
          "&isNeedBuy=true&positionId=" +
          this.positionId +
          "&positionName=" +
          this.positionName +
          "&oriPrice=" +
          item.oriPrice +
          "&price=" +
          item.price +
          "&pageName=" +
          this.pageName,
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.styleJobDescriptionContainer {
  margin-left: 32rpx;
  margin-right: 32rpx;
  background-color: white;
  border-radius: 16rpx;
  padding-top: 36rpx;
  padding-bottom: 28rpx;
  margin-top: 24rpx;

  .styleJobDescriptionTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 32rpx;

    .styleJobDescriptionTitleLine {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }

    .styleJobDescriptionTitle {
      color: #222222;
      font-size: 32rpx;
      font-weight: 800;
    }
  }

  .profession-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30rpx;

    .profession-item {
      height: 76rpx;
      background: #edf4ff;
      border-radius: 12rpx;
      align-items: center;
      margin-right: 14rpx;
      margin-bottom: 24rpx;
      padding: 18rpx 24rpx;
      box-sizing: border-box;
      text-align: center;
    }
  }
}

.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lm-wechat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  ::v-deep button {
    background-color: transparent;
    padding: 0 !important;
    border: none;
    height: 100%;
  }

  ::v-deep .u-loading::after {
    background-color: transparent;
  }
}
</style>
